<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <style>
      html, body {
        background-color: #f8f8f8;
      }
    </style>
  </head>
  <body>
    <h1>El Grapho Simple Chord</h1>
    <div id="container"></div>
    <script src="../engine/dist/ElGrapho.js"></script>
    <script>
const NUM_NODES = 30;
const NUM_NODES_FIRST_GROUP = 10;

let model = {
  nodes: [],
  edges: []
};

for (let n=0; n<NUM_NODES; n++) {
  model.nodes.push({
    group: n < NUM_NODES_FIRST_GROUP ? 0 : 1,
    label: n
  });

  model.edges.push({
    from: Math.floor(Math.random() * (NUM_NODES - 1)),
    to: Math.floor(Math.random() * (NUM_NODES - 1))
  });
}

let graph = new ElGrapho({
  container: document.getElementById('container'),
  model: ElGrapho.layouts.Chord(model),
  width: 500,
  height: 500
});

    </script>
  </body>
</html>